import React, { useState, useEffect } from 'react';
import laba from '../theme/main/laba.png'
function ScrollingList({ items }) {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [fade, setFade] = useState('opacity-100');

    useEffect(() => {
        const timer = setInterval(() => {
            setFade('opacity-0'); // 开始淡出
            setTimeout(() => {
                setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
                setFade('opacity-0'); // 重置为透明以隐藏过渡
                setTimeout(() => {
                    setFade('opacity-100'); // 开始淡入
                }, 20); // 微小延迟确保类被应用
            }, 500); // 等待淡出完成
        }, 3000); // 每3秒滚动到下一条消息

        return () => clearInterval(timer);
    }, [items.length]);

    return (
        <div className="flex items-center bg-[#191933] h-[80px] overflow-hidden">
            <img className="w-4 h-5 ml-2 mr-2" src={laba} alt="Icon" />
            <span className={`w-5/6 truncate text-white font-normal leading-none text-[28px] transition-opacity duration-500 ${fade}`}>{items[currentIndex]}</span>
        </div>
    );
}

export default ScrollingList;
